<script setup>

import {ref} from "vue";
import {value} from "lodash/seq.js";
import api from "../../request/apis.js";

const agentHost = ref("127.0.0.1:10000");

const agentHostList = ref([
  {
    value: "172.16.1.49:10240",
    label: "172.16.1.49:10240"
  },
  {
    value: "127.0.0.1:10000",
    label: "127.0.0.1:10000"
  }
]);

const contentHeight = ref();

const fileList = ref([
  {
    value: "log-assert.log",
    label: "log-assert.log"
  },
  {
    value: "log-business.log",
    label: "log-business.log"
  },
  {
    value: "log-debug.log",
    label: "log-debug.log"
  },
  {
    value: "log-error.log",
    label: "log-error.log"
  },
  {
    value: "log-info.log",
    label: "log-info.log"
  },
  {
    value: "log-log.log",
    label: "log-log.log"
  }
]);

const logFile = ref("log-business.log");

const setContentHeight = () => {
  const d = window.innerHeight - 140;
  contentHeight.value = d;
}

setContentHeight();

const loadFile = async () => {

  const linesUrl = `http://${agentHost.value}/agent/log/lines?logFile=${logFile.value}`;

  const lines = await api.getFileLines(linesUrl);
  console.log(lines)

  // const url = `http://${agentHost.value}/agent/log/download?logFile=${logFile.value}`;
  //
  // const downUrl = await api.downloadFile(url);
  // //字符串
  // downloadFile(downUrl, "logs.txt", "text/plain");
}

const downloadFile = (data, filename, type) => {
  debugger
  // 创建 Blob 对象
  const blob = new Blob([data], {type: type});

  // 判断当前浏览器是否是IE，由于IE是没有download 方法的，需要用msSaveBlob() 或 msSaveOrOpenBlob()
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    // 兼容IE
    window.navigator.msSaveOrOpenBlob(blob, filename)
  } else {
    // 创建 URL 对象
    const url = URL.createObjectURL(blob);

    // 创建链接
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;

    // 模拟点击链接进行下载
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // 释放 URL 对象
    URL.revokeObjectURL(url);
  }
}

</script>

<template>
  <Layout>
    <Content class="layout-content" :style="{ height: contentHeight+'px'}">
      <Row>
        <Col span="2.5">
          <div style="margin-top: 3px">
            请输入agent地址：
          </div>
        </Col>
        <Col span="6">
          <Select v-model="agentHost" clearable filterable allow-create multiple style="width:260px">
            <Option v-for="item in agentHostList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="2.5">
          <div style="margin-top: 3px">
            请选择日志文件：
          </div>
        </Col>
        <Col span="6">
          <Select v-model="logFile" clearable filterable multiple style="width:260px">
            <Option v-for="item in fileList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Button type="primary" @click="loadFile">load</Button>
        </Col>
      </Row>
    </Content>
  </Layout>
</template>

<style scoped>

</style>